<template>
  <el-container>
    <el-main>
      <el-descriptions title="阻塞路段详情" direction="horizontal" :column="2" border >
        <el-descriptions-item label="推荐路线id">{{segId}}</el-descriptions-item>
        <el-descriptions-item label="阻塞路段id">{{blockedSegId}}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{beginDate}}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{endDate}}</el-descriptions-item>
        <el-descriptions-item label="阻塞方向" >{{direction}}</el-descriptions-item>
        <el-descriptions-item label="原因" >{{reason}}</el-descriptions-item>


      </el-descriptions>

    </el-main>
    <el-footer>
      <el-button  type="danger" @click="this.delete">删除阻塞信息</el-button>
    </el-footer>
  </el-container>
</template>

<script>


import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "roadsChild",
  props:{

      segId:Number,
      blockedSegId:Number,
      beginDate:String,
      endDate:String,
      direction:String,
      reason:String,
  },

  data(){
    return{

    }
  },

  methods:{
    delete:function (){
      axios({
        method: 'post',
        url: '/api/road/deleteBlockedSegs',
        data:{
          blockedSegId:this.blockedSegId,
          segId:this.segId
        }
      })
          .then((res)=>{
            if(res.data.code==="1"){//返回成功
              // alert("更新成功")
              ElMessage.success('该路线设为不阻塞')
              this.$emit("dele")
            }else{//返回失败
              // alert("更新失败")
              ElMessage.error('该路线设为不阻塞失败')
            }
          });
    }
  }
}
</script>

<style scoped>
.el-container{
  height: 550px!important;
  width: 100%;
}

</style>